<template>
<div class="drag" ref="drag">
    <img :src="dragBg" alt="背景图片" class="drag-bg" @click="refresh">
    <div class="drag-info" v-if="infoShow" :style="{color:infocolor}" @click="refresh">{{dragInfo}}</div>
    <div class="handler" ref="handler"  :style="{'left':handlerLeft+'px'}" 
    @touchstart="touchstart1" @touchmove="touchmove1" @touchend="touchend1" 
    @dragstart="touchstart1" @drag="touchmove1" @dragend="touchend1">
        <img :src="handlerImg" alt="">
    </div>
    <div class="close" @click="close">
      <img :src="closeImg"  alt="">
      <span class="btn-info">点击关闭<b></b></span>
    </div>
</div>

</template>

<script>
import close from "../assets/closeBlack.svg";
import right from "../assets/right2.svg";
import rightOK from "../assets/right.svg";

export default {
  data() {
    return {
      dragbgWidth: 0,
      dragInfo: "拖动滑块验证",
      handlerLeft: 10,
      handlerImg: right,
      isMove: true,
      maxWidth: "",
      startx: 0,
      oLeft:'',
      infocolor:'#515151',
      closeImg:close,
      dragBg:'',
      infoShow:true,
      //缩放比例
      scale:''
    };
  },
  created(){
    this.refresh()
  },
  methods: {
    refresh(){
      this.dragInfo = "拖动滑块验证";
      this.infocolor = "#515151";
      this.$ajax(
        'getimg_drag',
        {appid:this.$store.state.appid,operation:this.$store.state.operation,identifying:this.$store.state.identifying},
        (res)=>{
          this.dragBg = 'data:image/png;base64,' + res.data.data
        },
        (error)=>{}
      )
    },
    touchstart1(e){
      this.maxWidth = this.$refs.drag.offsetWidth - this.$refs.handler.offsetWidth;
      if(typeof e.touches == 'undefined'){
        this.startx = e.clientX;
      }else{
        let touches = e.touches[0];
        this.startx = touches.clientX;
      }
      this.infoShow = false;
      this.scale = this.$refs.drag.offsetWidth/100;
    },
    touchmove1(e){
      if(this.isMove){
        if(typeof e.touches != 'undefined'){
          let touches = e.touches[0];
          this.oLeft = touches.clientX+5 - this.startx;
        }else{
         this.oLeft = e.clientX - this.startx;
        }
        if(this.oLeft < 0){
          this.handlerLeft = 10;
        }else if(this.oLeft >= this.maxWidth){
          
          this.handlerLeft = this.maxWidth;
        }else{
          this.handlerLeft = this.oLeft;
        }
      }
    },
    touchend1(e){
      if(typeof e.touches == 'undefined'){
         this.handlerLeft = e.clientX-this.startx;
      }

      let data = parseInt(this.handlerLeft/this.scale);
      this.$ajax(
          'check_virtual',
          {
              appid:this.$store.state.appid,
              operation:this.$store.state.operation,
              type:this.$store.state.type,
              identifying:this.$store.state.identifying,
              value:data,
          },
          (res)=>{
              if(res.data.data){
                  let save_value = data;
                  this.$emit('validation-finish',save_value);
                  this.isMove = false;
                  this.infoShow = true;
                  this.dragInfo = "验证通过";
                  this.infocolor = "#006c21";
                  this.handlerLeft = this.maxWidth - 10;
                  this.handlerImg = rightOK;
              }else{
                  this.infoShow = true;
                  this.dragInfo = "验证未通过";
                  this.infocolor = "#d81e06";
                  this.handlerLeft = 10;
              }
          },
          (error)=>{}
      )
    },
    close(){
      let closeState = true;
      this.$emit('close-state',closeState);
      window.parent.postMessage({
        'event':'validationCancel',
        'data':{
            operation:this.$store.state.operation
        }
      },'*')  
    }
  }
};
</script>

<style scoped>
.drag {
  height: auto;
  position: relative;
  color: #cdcdcd;
  min-height: 38.5px;
}
.drag-bg {
  width: 100%;
  height: auto;
  display: block;
}
.drag-info {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: Center;
}
.handler {
  width: 40px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: Center;
}
.handler img {
  width: 40px;
  height: auto;
}
.close{
  height: 100%;
  position: absolute;
  top: 0;
  right: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: Center;
  z-index: 1;
}
.close img{
  width: 25px;
  height: auto;
}
.btn-info{
    display: inline-block;
    color: #fff;
    font-size: .5rem;
    position: absolute;
    top: 10px;
    right: 25px;
    background: rgba(0,0,0,0.5);
    white-space: nowrap;
    padding: 3px;
    opacity: 0;
}
.btn-info b{
    border-width: 3px;
    border-color: transparent transparent transparent rgba(0,0,0,0.5);
    border-style: solid;
    position: absolute;
    left: 100%; 
    top:40%;
}
.close:hover .btn-info{
    opacity: 1;
}
</style>
